<!DOCTYPE html>
<html>
<head>
    <title>Sudo Slider | Options explorer</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>

    <link rel="STYLESHEET" type="text/css" href="../css/style.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
    <script type="text/javascript"
            src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-sanitize.min.js"></script>
    <script type="text/javascript"
            src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>

    <script type="text/javascript" src="../../js/jquery.sudoSlider.js"></script>
    <script type="text/javascript" src="../js/events.js"></script>
    <script type="text/javascript" src="../js/sudoSliderAngular.js"></script>
    <script type="text/javascript" src="../js/exports.js"></script>
    <!--<script type="text/javascript" src="js/optionExplorer.js"></script>-->
    <script type="text/javascript">
        EventBus.getInstance().fireEvent(new RegisterWindowEvent(window));
    </script>

    <style type="text/css" ng-bind="style"></style>
</head>
<body ng-app="exports" ng-controller="ImportExportController">
<div class="container">
    <div class="row">
        <div class="col-md-4 well">
            <label><h2>Export  <span class="glyphicon glyphicon-question-sign" tooltip-placement="right" tooltip="Use this output to &quot;save&quot; the configutation of the tool. Insert this in the below &quot;import&quot; form and press Import to restore the current configuration."></span></h2>
            <textarea class="form-control" rows="4">{{getExportOutput()}}</textarea></label><br />
            <label><h2>Import</h2>
            <textarea ng-model="importString"  class="form-control" rows="4" ></textarea>
                <button ng-click="doImport()">Import</button> </label>
        </div>
        <!--<div class="col-md-4 ">
            <h2>Here is some explanation as to what export and import does. </h2>
        </div>-->
        <div class="col-md-8">
            <label><h2>Options: </h2><textarea class="form-control" rows="4">{{getExportOptionsOutput()}}</textarea></label><br />
            <h2>HTML for the current configuration</h2>
            <pre>
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Some title&lt;/title&gt;
    &lt;meta http-equiv="content-type" content="text/html;charset=UTF-8" /&gt;
    &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="../js/jquery.sudoSlider.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
        $(document).ready(function(){
            var sudoSlider = $("#slider").sudoSlider({{getExportOptionsOutput("            ")}});
        });
    &lt;/script&gt;
    &lt;style type="text/css"&gt;
{{indentedStyle()}}
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div style="position:relative;"&gt;
    &lt;div id="slider"&gt;
{{getPrettySlides()}}
    &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
            </pre>
        </div>
    </div>
</div>
</body>
</html>